<template>
    <div class="computedTest">
        <div>姓：<input type="text" v-model="firstName" /></div>
        <div>名：<input type="text" v-model="lastName" /></div>
        <div>姓名：<input type="text" v-model="fullName" /></div>
        <br />
        <button @click="changeName">改变姓名</button>
        <hr />
        <router-link to="/login">跳转</router-link>
    </div>
</template>

<script setup>
import { computed, ref } from "vue";
let firstName = ref("毛");
let lastName = ref("萌辉");

//  计算属性
let fullName = computed({
    get() {
        return firstName.value + "-" + lastName.value;
    },
    set(newVal) {
        [firstName.value, lastName.value] = newVal.split("-");
    }
});
// 改变其姓名
let changeName = () => {
    fullName.value = "李-真真";
};
</script>

<style scoped lang="less"></style>
